<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>OAL</title>
    <link rel="stylesheet"  href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet"  href="../../common/css/daterangepicker.min.css">
    <link rel="stylesheet"  href="../../common/css/standard.css">
</head>
<body class="oal-layout-subPage">

<div class="oal-page">
    <div class="oal-page-content-section">
        <!-- Header -->
        <div class="oal-page-header-fixed">
            <div class="oal-page-header row">
                <div class="oal-page-header-logo-section">
                    <div class="oal-page-header-logo"></div>
                </div>
                <div class="oal-page-header-actions text-right">
                    <div class="oal-page-header-menu-list">
                        <div class="oal-page-header-menu-item oal-page-header-menu-promotion ">
                            <span>Seabird Promotion</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myRate isActive">
                            <div>My Rates<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myShipment">
                            <div>My Shipments<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-notification ">
                            <span>Notification</span>
                            <a  id="notificationPopover" data-container="body"
                                data-placement="bottom" data-html="true"
                                data-content="<div><ul class='popover-list'>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      </ul>
                                      <div class='popover-list-more'><a href='#'>More &gt;&gt;</a></div>
                                      </div>">
                                <span class="badge">
                                    New
                                </span></a>
                        </div>

                        <div class="oal-page-header-menu-item oal-page-header-userProfile">
                            <div aria-expanded="true" aria-haspopup="true" data-toggle="dropdown" class="btn-userProfile">
                                <span class="btn-userProfile-image"><img width="22px" src="../../common/images/default.png"></span>
                                <span class="action">Jason</span>
                                <span class="caret"></span>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Logout</a></li>
                                <li><a href="homepage_setting.html"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Setting</a></li>
                            </ul>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-setting">
                            <span>Setting</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-logout">
                            <span>Logout</span>
                        </div>
                    </div>

                    <div class="oal-page-header-chat-miniScreen">
                        <a class="hamburger menu" href="javascript:void(0)"  data-tiggle="click" data-toggle="tooltip" data-placement="bottom" title="Menu" >
                            <div></div>
                            <div></div>
                            <div></div>
                        </a>
                    </div>
                </div>

            </div>
        </div>


        <!-- Content -->
        <div class="oal-page-content">
            <div class="oal-page-content-item">
                <div class="oal-page-content-item-home">
                    <!-- Promo -->
                    <div class="oal-page-content-promo">
                        <div class="row oal-promo-item-list hide oal-promo-item-template">
                            <div class="oal-promo-item">
                                <div class="oal-box-shadow">
                                    <div  class="oal-promo-item-bg-image" >

                                    </div>
                                    <div class="oal-promo-item-bg" title="Click for Promotion Details"></div>
                                    <div class="oal-promo-item-sale oal-promo-item-sale-default" align="center">
                                        <div class="oal-promo-item-sale-text">
                                            <div class="oal-promo-item-sale-text-to">to</div>
                                            <div class="oal-promo-item-sale-text-port">Shanghai</div>

                                            <div class="oal-promo-item-sale-text-sale-area style-1 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">

                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-2 hide">
                                                <div class="oal-promo-item-sale-text-sale-more">More than</div>
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">
                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-3 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per-title ">
                                                        Lower Price
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-valid">Valid</div>
                                            <div class="oal-promo-item-sale-text-char">until</div>
                                            <div class="oal-promo-item-sale-text-number">Jun 07</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-actions">
                                        <div class="oal-promo-item-actions-detail">Click for Details <span class="glyphicon glyphicon-menu-down"></span></div>
                                        <div class="oal-promo-item-actions-records hide"  data-toggle="tooltip" data-placement="top" title="You had book this at">
                                            <span>My Booking</span>
                                        </div>
                                        <div class="oal-promo-item-actions-book hide">
                                            <span>Book Now</span>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-detail-info">
                                        <div class="oal-promo-item-detail-ss">

                                            <div class="oal-promo-item-detail-ss-etd">
                                                <div>ETA</div>
                                                <div>Aug 05</div>
                                                <div>TUE</div>
                                            </div>
                                            <div class="oal-promo-item-detail-ss-port">
                                                <div>
                                                    <span class="detail-icon"><img src="../../common/images/vessel.png"  /></span>
                                                    <span class="detail-to hide">to</span>
                                                    <span class="detail-pod"></span>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="oal-promo-item-time-alert hide">
                                        <div class="oal-promo-item-time-alert-msg">
                                            <div><h2>&nbsp;</h2></div>
                                            <div>Today Only</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-alert hide">
                                        A visitor made booking today with this promotion.
                                    </div>
                                    <div class="oal-promo-item-sold hide">
                                        <span>SOLD<br>OUT</span>
                                    </div>
                                    <div class="oal-promo-item-book">
                                        <span>Book<br>Now</span>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="oal-promo-item-list-all"></div>
                        <div class="oal-promo-item-detail-overall  oal-promo-item-detail-overall-template hide oal-promo-item-detail-overall-init">
                            <div class="oal-promo-item-detail-overall-detail">
                                <div class="row oal-promo-item-detail-overall-detail-result">
                                    <div class="col-lg-5 col-md-12 col-sm-12 oal-promo-item-detail-overall-detail-result-section1">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12  oal-promo-item-detail-overall-detail-title-box text-center">
                                                <div class="oal-promo-item-detail-overall-detail-title">
                                                    <div class="detail-por text-center">
                                                        <span class="city">Southampton</span>
                                                        <div class="detail-etd">Jul 05, Mon</div>
                                                    </div>
                                                    <div class="detail-arrow text-center">
                                                        <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                        <div class="detail-vessel-voyage text-center">NYK REMUS-039W</div>
                                                    </div>
                                                    <div class="detail-pod text-center">
                                                        <span class="city">Sydney</span>
                                                        <div class="detail-eta">Aug 05, Mon</div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row detail-info-margin">
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">CY Cutoff</h5>
                                                <h5 class="result">Jun 12, Mon</h5>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <h5 class="label">Commodity</h5>
                                                <h5 class="result">General Cargo</h5>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">Volume</h5>
                                                <h5 class="result">Min. 10 TEU</h5>
                                            </div>
                                            <div class="col-lg-5 col-md-5 col-sm-5 oal-promo-item-detail-overall-detail-result-hau">
                                                <h5 class="label">Haulage</h5>
                                                <div class="haulage-box">
                                                    <div class="haulage">CY/CY</div>
                                                    <div class="tips-icon">
                                                        <span class="glyphicon glyphicon-info-sign"></span>
                                                    </div>
                                                    <div class="tips">
                                                        <span>For door service haulage rate would apply.</span>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="hidden-lg col-md-12 col-sm-12 col-xs-12 special-requirement-margin"></div>
                                    <div class="col-lg-3 col-md-5 col-sm-12 oal-promo-item-detail-overall-detail-result-section2">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Special Requirement</h5>
                                                <h5 class="result">
                                                    Light Weight Cargo (10~15 Tons per TEU)
                                                </h5>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 remarks-margin">
                                                <h5 class="label">Remarks</h5>
                                                <h5 class="result">Subject to DOC, LSS and all destination charges.</h5>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-7 col-sm-12 oal-promo-item-detail-overall-detail-result-section3">
                                        <div class="row freight-section freight-section-border">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Ocean Freight</h5>
                                                <table class="oal-promo-item-detail-overall-rate-table">
                                                    <tr>
                                                        <td>USD</td>
                                                        <td><span class="highlightText">$900</span>/20GP</td>
                                                        <td><span class="highlightText">$1000</span>/40GP</td>
                                                        <td><span class="highlightText">$1200</span>/40HQ</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 inland-surcharge-margin">
                                                <h5 class="label">Inland Surcharge</h5>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                        <div class="oal-promo-item-detail-overall-inland-surcharge">
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 inland-city">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon inland-surcharge-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                        <input type="text" class="form-control inland-surcharge-field" placeholder="Inland City" aria-describedby="basic-addon1">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 surcharge">
                                                                    <span class="currency">USD</span><span class="fee">$0</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="oal-promo-item-detail-overall-action">
                                    <button class="btn btn-promo-action">Chat for any enquiries or book now</button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!--News -->
                    <div class="oal-page-content-news-section oal-box-shadow">
                        <div class="oal-page-content-news-list">
                            <div class="oal-page-content-news-title">News Around Your Region</div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 news">
                                    <div class="news-item">
                                        <div class="news-date">
                                            <span class="news-date-day">20</span>
                                            <span class="news-date-month">Jun</span>
                                        </div>
                                        <div class="news-text">
                                            <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                            <div class="news-text-details">Today is an exciting day that we start serving you �?our valued customer.  Hope you enjoy the new experience in Seabird and we are looking forward to hearing your valuable feedback.</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="oal-page-content-news-item-detail ">
                            <div class="news-content oal-box-shadow">
                                <div class="news-content-left-bar">
                                    <div class="news-content-left-bar-elements">
                                        <span class="news-content-back-icon"></span>
                                        <span>Back</span>
                                    </div>

                                </div>
                                <div class="news-content-details ">
                                    <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                    <div class="news-text-date">
                                        <span><img src="../../common/images/calender.png" width="22px"/> May 05 2016, Mon</span>
                                    </div>
                                    <div class="news-text-details"><p>Hong Kong Members of the G6 Alliance today announced additional void sailings within their Asia-Europe product to adjust to market demand.<br>

                                        As the G6 Alliance continues to review its product profile, the Loop 6 service will be suspended until further notice.<br>

                                        In order to deliver continuous coverage and service, the G6 Alliance will continue to provide the following rotation:<br>

                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.</p></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="oal-page-content-item-sub">
                    <!--my rates -->
                    <div class="oal-page-content-rate-section oal-box-shadow">
                        <div class="oal-page-content-rate-title col-lg-5 col-md-5 col-sm-5">My Rates</div>
                        <div class="pull-right"><a href="homepage_no_active_shipment.html">Expired Rates (2)</a></div>
                        <div class="oal-page-content-rate-detail" >
                            <div class="oal-my-rate-search-row">
                            <div class="row">
                                <div class="col-lg-8 col-sm-8 col-md-8 col-xs-12">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                        <ul class="form-control search-filters">
                                            <li class="search-filter-field">
                                                <input class="search-filter-input" type="text" autocomplete="false">
                                            </li>
                                        </ul>
                                        <span class="input-group-addon oal-my-shipment-search-more"  data-toggle="modal" data-target="#myModal">
                                            <span >More</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <div class="row">
                                        <div class="col-lg-12  col-sm-12 col-md-12 col-xs-12 text-right">
                                            <div class="form-inline">
                                                <div class="form-group">

                                                    <div class="input-group">
                                                            <span class="input-group-addon">
                                                                Sort by
                                                            </span>
                                                        <select class="form-control" id="my_shipment_filter">
                                                            <option>Select</option>
                                                            <option>Origin</option>
                                                            <option>Destination</option>
                                                        </select>
                                                            <span class="input-group-addon">
                                                                <i class="fa fa-sort-amount-asc sortby"></i>
                                                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            </div>
                            <ul class="my-rate-list">
                                <li>
                                    <div class="list-item-agreement-number">
                                        <span>Agreement No.00009999-999</span>
                                        <span>
                                            <span>10 Jul 2016 - 12 Aug 2016</span>&nbsp;
                                            <span class="grey-text">Outbound Appt Date</span>
                                        </span>
                                        <span>Pending for FMC Filing</span>
                                    </div>

                                    <div class="list-item-primary">
                                        <div class="list-item-action-show-details">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="new-indicator badge"></span><span class="new-indicator badge">New</span> <span class="rate-from-to-city">Doncaster</span> <span class="from-to-country">(GB)</span></div>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                <div class="oal-promo-item-detail-ss-door">
                                                    Door/Door
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="rate-from-to-city">East Chicago</span> <span class="from-to-country">(US)</span></div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-12">
                                                <div class="list-item-column-field-highlight"><span class="rate-cargo">Scrap metal / General</span></div>
                                            </div>
                                            <div class="col-lg-1 col-md-1 col-s-1 col-xs-1">
                                                <div class="btn-instant-booking" title="Instant Booking with this Agreement No."><i class="fa fa-gavel" aria-hidden="true"></i></div>
                                                <div class="btn-enquiry-chat" title="Chat for any enquiries"></div>
                                            </div>
                                        </div>



                                    </div>

                                    <div class="list-item-rate">
                                        <table class="table">
                                            <thead>
                                            <tr  class="list-item-column-header">
                                                <th class="col-lg-4 col-md-4"></th>
                                                <th width="100px">Currency</th>
                                                <th width="150px" class="text-right">20GP</th>
                                                <th width="150px" class="text-right">40GP</th>
                                                <th width="150px" class="text-right">40HQ</th>
                                                <th width="150px" class="text-right">45GP</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="list-item-rate-subgroup oceanFreight">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Ocean Freight & Door Service</span> <br><span class="annotation">Included PNC, CAF, CSC, THD</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Ocean Freight</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">85</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight striped">
                                                <td>Door Service - Outbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Door Service - Inbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup originSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Origin Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>EDF&nbsp; - Electronic Doc Fee  </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>ODF&nbsp; - Outbound Documentation Fee  </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>THC&nbsp; - Terminal Handling Charge at Origin </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>AMSC - Advance Manifest Security Charge </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>BAF&nbsp; - Bunker Adjustment Factor </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>40</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotation">Effective from 01 Aug 2016</span></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup destinationSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Destination Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Terminal Handling Charge at Destination </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>80</i></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge striped">
                                                <td>Equipment Cleaning</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">20</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Inbound Documentation Fee</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <div class="row terms-condition">
                                            <div class="col-lg-12 col-md-12 col-sm-12 grey-text">Terms and Condition</div>
                                            <div class="col-lg-3 col-md-3 col-sm-4 text-nowrap">
                                                <div class="grey-text">Applied to</div>
                                                <div class="result">
                                                    Service&nbsp;&nbsp;&nbsp;&nbsp;ASA,AAA1
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-4 text-nowrap">
                                                <div class="grey-text">Not Applied to</div>
                                                <div class="result">
                                                    Service&nbsp;&nbsp;&nbsp;&nbsp;LP5,CNS
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </li>
                                <li>
                                    <div class="list-item-agreement-number">
                                        <span>Agreement No.00001719-355</span>
                                        <span>
                                            <span>27 Jun 2016 - 31 Jul 2016</span>&nbsp;
                                            <span class="grey-text">Outbound Appt Date</span>
                                        </span>
                                        <span>Pending for FMC Filing</span>
                                    </div>

                                    <div class="list-item-primary">
                                        <div class="list-item-action-show-details">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="new-indicator badge">New</span> <span class="rate-from-to-city">Doncaster</span> <span class="from-to-country">(GB)</span></div>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                <div class="oal-promo-item-detail-ss-door">
                                                    Door/Door
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="rate-from-to-city">East Chicago</span> <span class="from-to-country">(US)</span></div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-12">
                                                <div class="list-item-column-field-highlight"><span class="rate-cargo">Scrap metal / General</span></div>
                                            </div>
                                            <div class="col-lg-1 col-md-1 col-s-1 col-xs-1">
                                                <div class="btn-instant-booking" title="Instant Booking with this Agreement No."><i class="fa fa-gavel" aria-hidden="true"></i></div>
                                                <div class="btn-enquiry-chat" title="Chat for any enquiries"></div>
                                            </div>
                                        </div>
                                        <div class="list-item-inland-surcharge row">
                                            <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 inland-city">
                                                <div class="input-group">
                                                    <span class="input-group-addon inland-surcharge-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                    <input type="text" class="form-control inland-surcharge-field" placeholder="Inland City" value="Southampton (STN)" aria-describedby="basic-addon1">
                                                    <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button" id="btnFindSurcharge">Find Inland Surcharge</button>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4 surcharge">
                                                <span class="currency">USD</span><span class="fee">$0</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="list-item-rate">
                                        <table class="table">
                                            <thead>
                                            <tr  class="list-item-column-header">
                                                <th class="col-lg-4 col-md-4"></th>
                                                <th width="100px">Currency</th>
                                                <th width="150px" class="text-right">20GP</th>
                                                <th width="150px" class="text-right">40GP</th>
                                                <th width="150px" class="text-right">40HQ</th>
                                                <th width="150px" class="text-right">45GP</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="list-item-rate-subgroup oceanFreight">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Ocean Freight & Door Service</span> <br><span class="annotation">Included PNC, CAF, CSC, THD</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Ocean Freight</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">85</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight striped">
                                                <td>Door Service - Outbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Door Service - Inbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup originSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Origin Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>EDF&nbsp; - Electronic Doc Fee  </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>ODF&nbsp; - Outbound Documentation Fee  </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>THC&nbsp; - Terminal Handling Charge at Origin </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>AMSC - Advance Manifest Security Charge </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>BAF&nbsp; - Bunker Adjustment Factor </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>40</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotation">Effective from 01 Aug 2016</span></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup destinationSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Destination Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Terminal Handling Charge at Destination </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>80</i></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge striped">
                                                <td>Equipment Cleaning</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">20</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Inbound Documentation Fee</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </li>
                                <li>
                                    <div class="list-item-agreement-number">
                                        <span>Agreement No.00001719-363</span>
                                        <span>
                                            <span>01 Aug 2016 - 15 Sep 2016</span>&nbsp;
                                            <span class="grey-text">Outbound Appt Date</span>
                                        </span>
                                        <span>Pending for FMC Filing</span>
                                    </div>

                                    <div class="list-item-primary">
                                        <div class="list-item-action-show-details">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="new-indicator badge"></span><span class="rate-from-to-city">Doncaster</span> <span class="from-to-country">(GB)</span></div>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                <div class="oal-promo-item-detail-ss-door">
                                                    Door/Door
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="rate-from-to-city">East Chicago</span> <span class="from-to-country">(US)</span></div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-12">
                                                <div class="list-item-column-field-highlight"><span class="rate-cargo">Scrap metal / General</span></div>
                                            </div>
                                            <div class="col-lg-1 col-md-1 col-s-1 col-xs-1">
                                                <div class="btn-instant-booking" title="Instant Booking with this Agreement No."><i class="fa fa-gavel" aria-hidden="true"></i></div>
                                                <div class="btn-enquiry-chat" title="Chat for any enquiries"></div>
                                            </div>
                                        </div>



                                    </div>

                                    <div class="list-item-rate">
                                        <table class="table">
                                            <thead>
                                            <tr  class="list-item-column-header">
                                                <th class="col-lg-4 col-md-4"></th>
                                                <th width="100px">Currency</th>
                                                <th width="150px" class="text-right">20GP</th>
                                                <th width="150px" class="text-right">40GP</th>
                                                <th width="150px" class="text-right">40HQ</th>
                                                <th width="150px" class="text-right">45GP</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="list-item-rate-subgroup oceanFreight">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Ocean Freight & Door Service</span> <br><span class="annotation">Included PNC, CAF, CSC, THD</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Ocean Freight</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">85</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight striped">
                                                <td>Door Service - Outbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Door Service - Inbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup originSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Origin Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>EDF&nbsp; - Electronic Doc Fee  </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>ODF&nbsp; - Outbound Documentation Fee  </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>THC&nbsp; - Terminal Handling Charge at Origin </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>AMSC - Advance Manifest Security Charge </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>BAF&nbsp; - Bunker Adjustment Factor </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>40</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotation">Effective from 01 Aug 2016</span></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup destinationSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Destination Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Terminal Handling Charge at Destination </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>80</i></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge striped">
                                                <td>Equipment Cleaning</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">20</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Inbound Documentation Fee</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </li>
                                <li>
                                    <div class="list-item-agreement-number">
                                        <span>Agreement No.00001719-367</span>
                                        <span>
                                            <span>22 Jun 2016 - 27 Jul 2016</span>&nbsp;
                                            <span class="grey-text">Outbound Appt Date</span>
                                        </span>
                                        <span>Pending for FMC Filing</span>
                                    </div>

                                    <div class="list-item-primary">
                                        <div class="list-item-action-show-details">
                                            Details <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="new-indicator badge"></span> <span class="rate-from-to-city">Doncaster</span> <span class="from-to-country">(GB)</span></div>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                <div class="oal-promo-item-detail-ss-door">
                                                    Door/Door
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <div class="list-item-column-field-highlight"><span class="rate-from-to-city">East Chicago</span> <span class="from-to-country">(US)</span></div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-12">
                                                <div class="list-item-column-field-highlight"><span class="rate-cargo">Scrap metal / General</span></div>
                                            </div>
                                            <div class="col-lg-1 col-md-1 col-s-1 col-xs-1">
                                                <div class="btn-instant-booking" title="Instant Booking with this Agreement No."><i class="fa fa-gavel" aria-hidden="true"></i></div>
                                                <div class="btn-enquiry-chat" title="Chat for any enquiries"></div>
                                            </div>
                                        </div>



                                    </div>

                                    <div class="list-item-rate">
                                        <table class="table">
                                            <thead>
                                            <tr  class="list-item-column-header">
                                                <th class="col-lg-4 col-md-4"></th>
                                                <th width="100px">Currency</th>
                                                <th width="150px" class="text-right">20GP</th>
                                                <th width="150px" class="text-right">40GP</th>
                                                <th width="150px" class="text-right">40HQ</th>
                                                <th width="150px" class="text-right">45GP</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="list-item-rate-subgroup oceanFreight">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Ocean Freight & Door Service</span> <br><span class="annotation">Included PNC, CAF, CSC, THD</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Ocean Freight</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">85</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">150</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight striped">
                                                <td>Door Service - Outbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-ocean-freight">
                                                <td>Door Service - Inbound</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">30</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>

                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup originSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Origin Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>EDF&nbsp; - Electronic Doc Fee  </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>45</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>ODF&nbsp; - Outbound Documentation Fee  </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>THC&nbsp; - Terminal Handling Charge at Origin </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge striped">
                                                <td>AMSC - Advance Manifest Security Charge </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-surcharge">
                                                <td>BAF&nbsp; - Bunker Adjustment Factor </td>
                                                <td class="text-center grey-text">GBP</td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>40</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="annotationMark" aria-hidden="true">*</span><i>80</i> </div>

                                                </td>
                                                <td><span class="annotation">Effective from 01 Aug 2016</span></td>
                                            </tr>
                                            <tr class="list-item-rate-subgroup destinationSurcharge">
                                                <td class="list-item-rate-subgroup-valign"><span class="list-item-rate-subgroupTitle">Destination Surcharge</span></td>
                                                <td class="text-center grey-text">
                                                    <div >USD</div>
                                                    <div>GBP</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">110</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">190</span></div>
                                                    <div class="list-item-rate-amount"><span class="list-item-column-field-highlight highlightText">40</span></div>

                                                </td>
                                                <td>
                                                    <div class="collapsible" onclick="">
                                                        <span class="glyphicon glyphicon-menu-down"></span><span class="glyphicon glyphicon-menu-up"></span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Terminal Handling Charge at Destination </td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>80</i></div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">*<i>150</i></div>
                                                </td>
                                                <td><span class="annotationMark" aria-hidden="true">*</span> <span class="annotation">Charged Per BL</span></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge striped">
                                                <td>Equipment Cleaning</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">20</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">40</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr class="list-item-rate-destinationSurcharge">
                                                <td>Inbound Documentation Fee</td>
                                                <td class="text-center grey-text">USD</td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>

                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td>
                                                    <div class="list-item-rate-amount">80</div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </li>
                            </ul>





                        </div>
                    </div>
                </div>
            </div>




        </div>

        <!-- Footer -->

        <div class="oal-page-footer">
            <div class="oal-page-footer-detail row">

                <div class="col-lg-6 col-md-6 text-left">
                    <div class="oal-page-footer-section  ">

                        <div class="oal-page-footer-copyRight ">Copyright © 1998-2016. <br>Orient Overseas Container Line Limited. <br>All rights reserved.</div>
                    </div>

                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="oal-page-footer-section">
                        <div class="oal-page-footer-phone-images">
                            <img src="../../common/images/phone.png"/>
                        </div>
                        <div class="oal-page-footer-section-message text-left">
                            <div class="oal-page-footer-section-title">OOCL Seabird</div>
                            <p>Your shipment assistance who answer your shipment enquiry anytime anywhere</p>
                        </div>
                        <div class="oal-page-footer-download-images">
                            <div class="oal-page-footer-download-google"></div>
                            <div class="oal-page-footer-download-app"></div>

                        </div>
                    </div>

                </div>


            </div>
        </div>



    </div>

    <div class="oal-page-chat-section">
        <div class="arrow"></div>

        <div class="oal-page-side-bar">
            <div class="oal-page-chat-active-icon"></div>
            <div class="oal-page-chat-active-item" id="btn_chat">
                <div class="icon-text oal-page-chat-icon">Chat</div>
                <span class="badge"> 3 </span>
            </div>

            <div class="oal-page-booking-item">
                <div class="icon-text oal-page-booking-item-icon"><i class="fa fa-gavel" aria-hidden="true"></i><br>Book</div>
            </div>
            <div class="oal-page-side-top">
                <span class="glyphicon glyphicon-arrow-up"></span><div>Top</div>
            </div>
        </div>
        <div class="oal-page-chat-layer">
            <div class="oal-page-chat-layer">
                <iframe id="chatIframe" src="http://chenji5-3-w7:90/NJS_PRS_CUST/secured/chat?userId=poonhs"></iframe>

            </div>
        </div>

    </div>
</div>
<!--Search Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel">Search Criteria </h2>
            </div>
            <div class="modal-body">
                <div  class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Effective Period</label>
                        <div class="col-sm-9">
                            <div class="input-group oal-datepicker">
                                <input id="etd_date_range" type="text" class="form-control date-range-box"  value="" placeholder="From - To">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">POR</label>
                        <div class="col-sm-9">
                            <input type="text" class="input-large form-control"   placeholder="POR" id="pol">
                            <input type="hidden" id="hidden_pol">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">FND</label>
                        <div class="col-sm-9">
                            <input type="text" class="input-large form-control"  placeholder="FND"  id="pod">
                            <input type="hidden" id="hidden_pod">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Commodity</label>
                        <div class="col-sm-9">
                            <select id="lst_commodiy" class="form-control">
                                <option>Select</option>
                                <option>Scrap metal / General </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Agreement Number</label>
                        <div class="col-sm-9">
                            <input id="agreement_number" type="text" class="form-control"   placeholder="Agreement Number">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-center">

                <button type="button" id="btnAdvancedSearch" class="btn oal-page-highlight-btn btn-search">Search</button>
            </div>
        </div>
    </div>
</div>


<!--include JS File -->
<script src="../../common/js/jquery-1.12.4.js"></script>
<script src="../../common/js/bootstrap.js"></script>
<script src="../../common/js/dateRangePicker/moment.js"></script>
<script src="../../common/js/dateRangePicker/jquery.daterangepicker.js"></script>
<script src="../../common/js/bootstrap.combobox.js"></script>
<script src="../controler/homepage.js"></script>
<script src="../controler/myrate.js"></script>
<script type="text/javascript">
    $('.my-rate-list').hide();
    $('.oal-page-content-rate-detail').append('<div class="loader">loading</div>');
    setTimeout(function(){
        $('.loader').hide();
        $('.my-rate-list').show();
    },2000);

</script>
</body>
</html>